<template>
  <div class="w-screen h-screen flex items-center justify-center">
    <el-card class="w-[95%] sm:w-[400px] min-h-[540px]">
      <div class="flex justify-center items-center mt-[20px]">
        <img src="https://mdn.alipayobjects.com/huamei_0prmtq/afts/img/A*IVdnTJqUp6gAAAAAAAAAAAAADvuFAQ/original" alt=""
             class="h-[62px]">
      </div>
      <el-form
          ref="loginFormRef"
          :model="loginForm"
          status-icon
          :rules="rules"
          class="mt-[45px]"
      >
        <el-form-item prop="name">
          <el-input v-model="loginForm.name" class="h-[40px]" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" show-password class="h-[40px]" placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="isCheck" size="large">我已阅读并同意语雀 <span class="text-cyan-400">服务协议</span> 和
            <span class="text-cyan-400">隐私权政策</span></el-checkbox>
        </el-form-item>
        <!--        <el-form-item>-->
        <!--          <el-input v-model="loginForm.captcha" show-password class="h-[40px]" placeholder="请输入密码"-->
        <!--          />-->
        <!--        </el-form-item>-->
      </el-form>
      <button class="loginButton" @click="login" :class="[isDisable? 'cursor-not-allowed':'cursor-pointer']"
              :disabled="isDisable" :style="{opacity: isDisable ?0.3:1}">登录/注册
      </button>
    </el-card>

    <el-dialog
        桌面
        v-model="isDesktop"
        width="30%"
        :show-close="false"
    >
      <div>
        <p>服务协议及隐私保护</p>

        <p>为更好地保护你的合法权益，请阅读并同意语雀 <span class="text-cyan-400">服务协议</span> 和 <span
            class="text-cyan-400">隐私权政策</span></p>
      </div>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="isDesktop = false">不同意</el-button>
        <el-button type="primary" @click="desktopConfirm">
        同意
      </el-button>
      </span>
      </template>
    </el-dialog>

    <van-dialog v-model:show="isMobile" show-cancel-button @confirm="mobileConfirm">
      <div class="p-7">
        <p>服务协议及隐私保护</p>
        <p class="mt-2 ">为更好地保护你的合法权益，请阅读并同意语雀 <span class="text-cyan-400">服务协议</span> 和 <span
            class="text-cyan-400">隐私权政策</span></p>
      </div>
    </van-dialog>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref, watch} from 'vue'
import UseStorage from '@/composables/useStorage.ts'
import {FormRules} from 'element-plus'
import {equipment} from '@/utils'
import {showConfirmDialog} from 'vant'
import {userModel} from '@/types/auth.ts'
import {loginAuth, userInfo} from '@/apis/auth'
import {useRouter} from 'vue-router'
import {useUserInfo} from '@/stores/userInfo.ts'
const storage = UseStorage()
const router = useRouter()
defineOptions({inheritAttrs: false, name: 'Login'})

// 错误，因为 watch() 得到的参数是一个 number
/**
 * 处理登录逻辑
 * */
const loginForm = reactive<userModel>({
  name: 'zfl123',
  password: '123456'
})
const isCheck = ref(false)
const isDesktop = ref(false)
const isMobile = ref(false)
const rules = reactive<FormRules>({
  name: [{
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  }],
  password: [{
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }]
})
const isDisable = ref(true)
watch(
    () => loginForm.password,
    (count) => {
      isDisable.value = loginForm.password.length > 0 ? false : true
    }, {
      immediate: true
    }
)
async function mobileConfirm() {
  isCheck.value = true
  await handleLogin()
}

async function desktopConfirm() {
  isDesktop.value = false
  isCheck.value = true
  await handleLogin()
}
async function handleLogin() {
  const res = await loginAuth(loginForm);
  if (res.code !== 200) return;
  storage.set('token', res.data.token);
  await handleUserInfo()
  await router.push({ name: '/' });
}


async function login() {
  if (!isCheck.value) {
    isMobile.value = equipment()
    isDesktop.value = ! isMobile.value
    return
  }
  await handleLogin()
}
/**
 * 处理用户信息
 * */
const {initUserInfo} = useUserInfo()
async function handleUserInfo(){
  const res = await userInfo()
  if (res.code!==200) return
   initUserInfo(res.data)
}
</script>

<style scoped lang="scss">
.loginButton {
  @apply w-full h-[40px];
  background: #00b96b;
  border-color: #00b96b;
  border-radius: 6px;
  color: #fff;
}
</style>

